<!-- 10.28 加目录及样式
10.14（56）改成动态课程名以及添加点击事件 
目录可以像div那样循环这来，后面的标记数据库一开始设置为0，看完一次视频就改为1看看这样能不能实现就像学习通那样
-->
<template>
	<div>
		<div style="height: 40px; background-color: #4c4c4c;">
			<span style="color: white;margin-left: 200px;line-height: 40px;font-size: 20px;">学</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">习</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">使</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">你</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">强</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">大！</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">加</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">油</span>
			<i class="el-icon-user" style="color: white;margin-left: 360px;"></i>
			<span style="line-height: 40px; color: white;">带与</span>
		</div>
		<div>
			<div style="height: 60px;border: #0000FF 1px solid;">
				<el-row>
					<el-col :span="6" style="font-size: 30px; color: #7b9e31;line-height: 60px; margin-left: 120px;">
						<span class="className" @click="courseIntroduction()">{{className}}</span>
					</el-col>
					<el-col :span="14" style="line-height: 60px;margin-left: 20px; font-size: 18px;">
						<ul class="box">
							<li v-for="c,index of cities" @click="changeList(index)">
								<a :class="{checked:index==n}" href="javascript:void(0);" @click="choice(index)">{{c}}</a>
							</li>
						</ul>
					</el-col>
				</el-row>
			</div>
			<div v-if="index">
				<div class="left">
					<div class="contents">目录</div>
					<div class="directoryContent">
						<el-tree :data="tree" :default-expand-all="true" :props="defaultProps" node-key="id" ref="tree" @current-change="currentChapter" >
							<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
								<span>{{data.name}}</span>
							</span>
						</el-tree>
					</div>
				</div>
				<div class="right">
					<p style="text-align: center;margin-top: 5px;font-size: 20px;">课程描述</p>
					<p style="text-align: center;margin-top: 10px;padding: 35px;font-family: STKaiti;">{{description}}</p>
				</div>
			</div>
			<div v-if="task" class="task">
				<div style="padding-top: 15px;border-bottom: #d9d9d9 solid 2px;height: 44px;">
					<span :class="taskShow ? 'taskUn' :'taskActive'" @click="taskShowCom">已完成的作业</span> | <span :class="!taskShow ? 'taskUn' :'taskActive'"
					 @click="taskShowUndo">未完成的作业</span>
				</div>
				<div>
					<el-card v-for="item in items" :key="item.courseId">
						<div style="padding: 20px 20px 0px 20px;">
							<p style="padding: 5px 0px; font-size: 12px;v">{{item.courseId}}</p>
							<p style="padding: 5px 0px;font-size: 12px;">开始时间：{{item.startTime}}</p>
							<p style="padding: 5px 0px;font-size: 12px;">截止时间：{{item.endTime}}</p>
							<p style="padding: 5px 0px;font-size: 12px;">作业状态：{{item.status}}</p>
						</div>
						<div style="background-color: #e8eeda;height: 52px;">
							<span style="margin-left: 10px;line-height: 52px;font-size: 18px; color: #FF0000;">10分</span>
							<el-button size="mini" style="margin-left: 180px;" type="success" plain>查看</el-button>
						</div>
					</el-card>
				</div>
			</div>
			<div v-if="notify" class="notify">
				<div style="padding-top: 15px;border-bottom: #d9d9d9 solid 2px;height: 44px;">
					<span class="taskActive">我的通知</span>
				</div>
				<div>
					<el-card v-for="item in notifyItems" :key="item.id">
						<div style="padding: 20px 20px 0px 20px;">
							<p style="padding: 5px 0px; font-size: 12px;v">{{item.title}}</p>
							<p style="padding: 5px 0px;font-size: 12px;">发布时间：{{item.releaseTime}}</p>
							<p style="padding: 5px 0px;font-size: 12px;">发送人：{{item.sender}}</p>
							<p style="padding: 5px 0px;font-size: 12px;">班级：{{item.className}}</p>
						</div>
						<div style="background-color: #e8eeda;height: 52px;line-height: 52px;">
							<el-button size="mini" style="margin-left: 230px;" type="success" plain @click="checkDetails(item.id)">查看</el-button>
						</div>
					</el-card>
				</div>
			</div>
			<div v-if="material" class="material">
				<el-row :gutter="10" style="margin-top: 30px;">
					<el-col :span="5">
						<el-input v-model="search.fileName" placeholder="请输入要查询的文件名"></el-input>
					</el-col>
					<el-col :span="19">
						<el-button type="primary" icon="el-icon-search" plain @click="searchData()">搜索</el-button>
						<el-button type="primary" icon="el-icon-search" plain>批量下载</el-button>
					</el-col>
				</el-row>
				<el-table :data="fileData" size=small style="width: 100%;margin-top: 20px;" :header-cell-style="{background:'#f4f4f4',border:'1px #e7e7e7 solid',color:'#555', 'font-size':'14px'}"
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="fileName" label="文件名">
						<template slot-scope="scope">
							<img v-if="scope.row.fileType == 'pdf'" align="center" src="../../../assets/images/pdf.gif" />
							<img v-else-if="scope.row.fileType == 'pptx'" align="center" src="../../../assets/images/ppt.gif" />
							<img v-else-if="scope.row.fileType == 'mp4'" align="center" src="../../../assets/images/video.png" />
							<img v-else align="center" src="../../../assets/images/word.gif" />
							<span style="font-size: 14px; margin-left: 15px;width: 600px;display: inline-block; ">{{scope.row.fileName}}</span>
							<el-button icon="el-icon-view" type="text" style="font-size: 20px;"></el-button>
							<el-button icon="el-icon-download" type="text" style="margin-left: 15px;font-size: 20px;"></el-button>
						</template>
					</el-table-column>
					<el-table-column prop="uploader" label="上传者" width="80">
					</el-table-column>
					<el-table-column prop="size" label="大小" width="80">
					</el-table-column>
					<el-table-column prop="createtime" label="创建日期" width="150">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-dialog
		  title="通知详情"
		  :visible.sync="dialogVisible"
		  width="50%"
		  >
		  <div style="height: 400px; ">
			  <p style="text-align: center;">{{notifyDetailTitle}}</p>
			  <div v-html="notifyDetailContent"></div>
		  </div>
		</el-dialog>
	</div>
</template>
<script>
	import axios from '../../../utils/axiosutils.js';
	export default {
		name: 'myCourse',
		data() {
			return {
				className: 'Java零基础教程视频',
				cities: ["首页", "任务", "通知", "资料"],
				index: true,
				task: false,
				notify: false,
				material: false,
				n: 0,
				// 树形控件配置项，为对象，label代表节点的title标签，children代表节点的子树（孩子）
				defaultProps: {
					label: 'name',
					children: 'children'
				},
				tree: [],
				description:'',
				taskShow: true,
				items: [{
					courseId: 1,
					startTime: '2021-02-30 13:00:21',
					endTime: '2021-02-31 13:00:21',
					status: '已完成',
				}, {
					courseId: 1,
					startTime: '2021-02-30 13:00:21',
					endTime: '2021-02-31 13:00:21',
					status: '已完成',
				}, {
					courseId: 1,
					startTime: '2021-02-30 13:00:21',
					endTime: '2021-02-31 13:00:21',
					status: '已完成',
				}],
				fileData: [{
					fileName: '零基础教程视频.pptx',
					fileType: 'pptx',
					uploader: '张三',
					size: 145,
					createtime: "2012-21-21 12:12:23"
				}, {
					fileName: '零基础教程视频.pptx',
					fileType: 'mp4',
					uploader: '张三',
					size: 145,
					createtime: "2012-21-21 12:12:23"
				}, {
					fileName: '零基础教程视频.pptx',
					fileType: 'pdf',
					uploader: '张三',
					size: 145,
					createtime: "2012-21-21 12:12:23"
				}, {
					fileName: '零基础教程视频.pptx',
					fileType: 'doc',
					uploader: '张三',
					size: 145,
					createtime: "2012-21-21 12:12:23"
				}],
				search: {
					fileName: ''
				},
				notifyItems: [],
				notifyDetailTitle:'',
				notifyDetailContent:'',
				dialogVisible:false
				
			};
		},
		created() {
			axios.post("/chapter/contents", resp => {
				this.tree = resp.obj;
			}, {
				courseId: this.$route.query.courseId
			});
			axios.post("/course/description",resp=>{
				this.description=resp.obj.description;
			},{
				courseId: this.$route.query.courseId
			});
			axios.post("/notify/message",resp=>{
				this.notifyItems=resp.obj;
			})
		},
		methods: {
			changeList(index) {
				this.n = index; //this指向app
			},
			choice(index) {
				console.log(index)
				if (index == 1) {
					this.index = false;
					this.task = true;
					this.notify = false;
					this.material = false;
				} else if (index == 2) {
					this.index = false;
					this.task = false;
					this.notify = true;
					this.material = false;
				} else if (index == 3) {
					this.index = false;
					this.task = false;
					this.notify = false;
					this.material = true;
				} else {
					this.index = true;
					this.task = false;
					this.notify = false;
					this.material = false;
				}
				// 对应数组的下标可以用来区分显示
			},
			courseIntroduction() {
				// 以this.className为查询条件查询课程简介以弹出框显示出来
			},
			taskShowCom() {
				if (this.taskShow) {
					this.taskShow = false
				} else {
					this.taskShow = true
				}
			},
			taskShowUndo() {
				if (this.taskShow) {
					this.taskShow = false
				} else {
					this.taskShow = true
				}
			},
			currentChapter(val, node){
				if(node.leval=2){
					this.$router.push({
						name: 'video',
						query: {
							courseId: node.data.courseId,
							chapterId: node.data.id,
							name: node.data.name
						}
					})
				}
			},
			checkDetails(id){
				this.dialogVisible=true;
				axios.post("/notify/getOneMessage",resp=>{
					this.notifyDetailTitle=resp.obj.title;
					this.notifyDetailContent=resp.obj.contents;
				},{
					id:id
				})
			}
		}
	};
</script>
<style scoped>
	ul {
		padding: 0;
		list-style: none;
		/* margin:150px 150px; */
	}

	li {
		width: 80px;
		/* height:50px; */
		display: inline-block;
		/* text-align: center; */
		/* line-height: 60px; */
		/* cursor: pointer; */
		transition: all 0.3s linear;
		margin-left: 5px;
	}

	a {
		cursor: pointer;
		padding: 2px 8px;
		text-decoration: none;
		color: black;
	}

	a:hover {
		background-color: #999;
		border-radius: 3px;
		color: #fff;
	}

	a.checked {
		background-color: #999;
		border-radius: 3px;
		color: #fff;
	}

	/* 课程的名字样式 */
	.className:hover {
		cursor: pointer;
		text-decoration: underline
	}

	.left {
		display: inline-block;
		margin-left: 200px;
		margin-top: 20px;
	}

	.right {
		display: inline-block;
		vertical-align: top;
		margin: 80px;
		width: 450px;
		/* height: 400px; */
		background-color: #f0f0f0;
	}

	.contents {
		background-color: #f0f0f0;
		height: 37px;
		border: 1px solid #ddd;
		line-height: 37px;
		font-size: 18px;
		padding: 10px 10px 10px 20px;
		border-radius: 5px 5px 0 0;
		width: 634px;
	}

	.directoryContent {
		width: 664px;
		border: 1px solid #ddd;
	}

	.task {
		width: 1100px;
		height: 730px;
		margin: 0 auto;
	}

	.task span {
		cursor: pointer;
	}

	.taskActive {
		line-height: 44px;
		padding: 12px;
		font-size: 16px;
		color: #7b9e31;
		border-bottom: 2px solid #7b9e31;
	}

	.taskUn {
		line-height: 44px;
		font-size: 16px;
		padding: 12px;
		color: #999
	}

	>>>.el-card__body {
		padding: 0;
	}

	.el-card {
		width: 315px;
		margin: 30px 20px 0px 0px;
		display: inline-block;
	}

	.material {
		width: 1100px;
		height: 730px;
		margin: 0 auto;
	}

	.notify {
		width: 1100px;
		height: 730px;
		margin: 0 auto;
	}
</style>
